<template>
 <div class="boxmain">
        <div class="box1">
            <span><strong>系统快捷入口</strong></span>
        </div>

        <div class="box2">

            <div class="img1">

                <div class="con1">
                    <img src="../../assets/images/3.png" alt="">
                    <span>订单管理</span>
                </div>
            </div>

            <div class="img2">
                <div class="con2">
                    <img src="../../assets/images/4.png" alt="">
                    <span>项目进度</span>
                </div>
            </div>

            <div class="img3">
                <div class="con3">
                    <img src="../../assets/images/5.png" alt="">
                    <span>生产任务</span>
                </div>
            </div>

            <div class="img4">
                <div class="con4">
                    <img src="../../assets/images/4.png" alt="">
                    <span>运输任务</span>
                </div>
            </div>

            <div class="img1">
                <div class="con1" @click="goWorkArea">
                    <img src="../../assets/images/5.png" alt="">
                    <span>工区管理</span>
                </div>
            </div>

            <div class="img1">
                <div class="con1" @click="goDept">
                    <img src="../../assets/images/6.png" alt="" href>
                    <span>部门管理</span>
                </div>
            </div>

            <div class="img1">
                <div class="con1" @click="goStaff">
                    <img src="../../assets/images/7.png" alt="">
                    <span>人员管理</span>
                </div>
            </div>

            <div class="img1">
                <div class="con1" @click="goStaffAttend">
                    <img src="../../assets/images/8.png" alt="">
                    <span>出勤记录</span>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    export default{
        methods: {
            goStaff(){
                this.$router.push('/staff')
                this.$message({
                    showClose: true,
                    message: 'welcome',
                    type: 'success'
                });
            },
            goStaffAttend(){
                this.$router.push('/staffAttend')
                this.$message({
                    showClose: true,
                    message: 'welcome',
                    type: 'success'
                });
            },
            goDept(){
                this.$router.push('/dept')
                this.$message({
                    showClose: true,
                    message: 'welcome',
                    type: 'success'
                });
            },
            goWorkArea(){
                this.$router.push('/workArea')
                this.$message({
                    showClose: true,
                    message: 'welcome',
                    type: 'success'
                });
            },
            goHome(){
                this.$router.push('/home')
                this.$message({
                    showClose: true,
                    message: 'welcome',
                    type: 'success'
                });
            }
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

        .boxmain{
            height: 450px;
            width: 1215px;
            position: absolute;
            top: 0; 
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto; 
            opacity: 1;
        }

        .box1{
            height: 50px;
            font-size: 20px;
            background-color:#f2f2f2;
            opacity: 1;
            border-style: solid;
            border-width:1px;
            border-color:#D7D7D7;
        }
        .img1{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img1 span{
            font-size: 20px;
            display: block;
        }

        .img2{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img2 span{
            font-size: 20px;
            display: block;
        }

        .img3{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img3 span{
            font-size: 20px;
            display: block;
        }

        .img4{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img4 span{
            font-size: 20px;
            display: block;
        }

        .img5{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img5 span{
            font-size: 20px;
            display: block;
        }

        .img6{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img6 span{
            font-size: 20px;
            display: block;
        }

        .img7{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img7 span{
            font-size: 20px;
            display: block;
        }

        .img8{
            height: 200px;
            width: 300px;
            border-radius: 10px;
            float: left;
            border-style: solid;
            border-width:2px;
            border-color:#81D3F8;
            vertical-align: middle;
            text-align: center;
        }

        .img8 span{
            font-size: 20px;
            display: block;
        }
</style>
